<template>
  <div class="lead-pool">
    <div class="header-section">
      <h2>线索池</h2>
      <div class="search-bar">
        <el-input
          v-model="searchForm.keyword"
          placeholder="客户名称/手机号"
          class="search-input"
          prefix-icon="el-icon-search"
        />
        <el-select
          v-model="searchForm.source"
          placeholder="线索来源"
          class="search-select"
        >
          <el-option label="全部" value="" />
          <el-option label="导入" value="import" />
          <el-option label="手动添加" value="manual" />
          <el-option label="活动获取" value="activity" />
          <el-option label="其他" value="other" />
        </el-select>
        <el-select
          v-model="searchForm.level"
          placeholder="线索等级"
          class="search-select"
        >
          <el-option label="全部" value="" />
          <el-option label="A级" value="A" />
          <el-option label="B级" value="B" />
          <el-option label="C级" value="C" />
          <el-option label="D级" value="D" />
        </el-select>
        <el-date-picker
          v-model="searchDateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          class="date-picker"
        />
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="success" @click="handleBatchAssign" :disabled="selectedRows.length === 0">批量分配</el-button>
      </div>
    </div>

    <div class="table-section">
      <el-table
        :data="leadPoolList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="序号" width="80" />
        <el-table-column prop="customerName" label="客户名称" min-width="150">
          <template #default="scope">
            <el-button type="text" @click="handleViewDetail(scope.row)">{{ scope.row.customerName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号码" min-width="130" />
        <el-table-column prop="email" label="客户邮箱" min-width="180" />
        <el-table-column prop="source" label="线索来源" min-width="120">
          <template #default="scope">
            <el-tag v-if="scope.row.source === 'import'" type="primary">导入</el-tag>
            <el-tag v-else-if="scope.row.source === 'manual'" type="success">手动添加</el-tag>
            <el-tag v-else-if="scope.row.source === 'activity'" type="warning">活动获取</el-tag>
            <el-tag v-else type="info">其他</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="level" label="线索等级" min-width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.level === 'A'" type="danger">A级</el-tag>
            <el-tag v-else-if="scope.row.level === 'B'" type="warning">B级</el-tag>
            <el-tag v-else-if="scope.row.level === 'C'" type="success">C级</el-tag>
            <el-tag v-else type="info">D级</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="进入线索池时间" min-width="180" />
        <el-table-column prop="daysInPool" label="线索池天数" min-width="100" />
        <el-table-column prop="priority" label="优先级" min-width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.priority === 'high'" type="danger">高</el-tag>
            <el-tag v-else-if="scope.row.priority === 'medium'" type="warning">中</el-tag>
            <el-tag v-else type="info">低</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="250" fixed="right">
          <template #default="scope">
            <div style="display: flex; gap: 8px; flex-wrap: wrap;">
              <el-button
                type="primary"
                size="small"
                @click="handleClaim(scope.row)"
                style="min-width: 60px;"
              >
                领取
              </el-button>
              <el-button
                type="success"
                size="small"
                @click="handleAssign(scope.row)"
                style="min-width: 60px;"
              >
                分配
              </el-button>
              <el-button
                type="warning"
                size="small"
                @click="handleEditLead(scope.row)"
                style="min-width: 60px;"
              >
                编辑
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="handleDeleteLead(scope.row)"
                style="min-width: 60px;"
              >
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 线索详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="线索详情"
      width="700px"
      @close="handleDetailDialogClose"
    >
      <div v-if="currentLead" class="lead-detail">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="客户名称">{{ currentLead.customerName }}</el-descriptions-item>
          <el-descriptions-item label="手机号码">{{ currentLead.phone }}</el-descriptions-item>
          <el-descriptions-item label="客户邮箱">{{ currentLead.email || '-' }}</el-descriptions-item>
          <el-descriptions-item label="线索来源">
            <el-tag v-if="currentLead.source === 'import'" type="primary">导入</el-tag>
            <el-tag v-else-if="currentLead.source === 'manual'" type="success">手动添加</el-tag>
            <el-tag v-else-if="currentLead.source === 'activity'" type="warning">活动获取</el-tag>
            <el-tag v-else type="info">其他</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="线索等级">
            <el-tag v-if="currentLead.level === 'A'" type="danger">A级</el-tag>
            <el-tag v-else-if="currentLead.level === 'B'" type="warning">B级</el-tag>
            <el-tag v-else-if="currentLead.level === 'C'" type="success">C级</el-tag>
            <el-tag v-else type="info">D级</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="线索池天数">{{ currentLead.daysInPool }}天</el-descriptions-item>
          <el-descriptions-item label="优先级">
            <el-tag v-if="currentLead.priority === 'high'" type="danger">高</el-tag>
            <el-tag v-else-if="currentLead.priority === 'medium'" type="warning">中</el-tag>
            <el-tag v-else type="info">低</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="备注">{{ currentLead.remark || '-' }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="handleClaimFromDetail" v-if="currentLead">领取</el-button>
          <el-button type="success" @click="handleAssignFromDetail" v-if="currentLead">分配</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 分配对话框 -->
    <el-dialog
      v-model="assignDialogVisible"
      :title="assignDialogTitle"
      width="500px"
      @close="handleAssignDialogClose"
    >
      <el-form :model="assignForm" label-width="100px">
        <el-form-item label="选择负责人" required>
          <el-select v-model="assignForm.owner" placeholder="请选择负责人" style="width: 100%">
            <el-option label="销售员A" value="销售员A" />
            <el-option label="销售员B" value="销售员B" />
            <el-option label="销售员C" value="销售员C" />
            <el-option label="销售员D" value="销售员D" />
          </el-select>
        </el-form-item>
        <el-form-item label="分配原因">
          <el-input
            v-model="assignForm.reason"
            type="textarea"
            placeholder="请输入分配原因"
            :rows="3"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="assignDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAssignSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑线索对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑线索"
      width="600px"
      @close="handleEditDialogClose"
    >
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="客户名称" required>
          <el-input v-model="editForm.customerName" placeholder="请输入客户名称" />
        </el-form-item>
        <el-form-item label="手机号码" required>
          <el-input v-model="editForm.phone" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="客户邮箱">
          <el-input v-model="editForm.email" placeholder="请输入客户邮箱" />
        </el-form-item>
        <el-form-item label="线索来源" required>
          <el-select v-model="editForm.source" placeholder="请选择线索来源">
            <el-option label="导入" value="import" />
            <el-option label="手动添加" value="manual" />
            <el-option label="活动获取" value="activity" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item label="线索等级" required>
          <el-select v-model="editForm.level" placeholder="请选择线索等级">
            <el-option label="A级" value="A" />
            <el-option label="B级" value="B" />
            <el-option label="C级" value="C" />
            <el-option label="D级" value="D" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="editForm.remark"
            type="textarea"
            placeholder="请输入备注信息"
            :rows="3"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleEditSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'LeadPool',
  data() {
    return {
      searchForm: {
        keyword: '',
        source: '',
        level: ''
      },
      searchDateRange: null,
      leadPoolList: [],
      selectedRows: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      detailDialogVisible: false,
      currentLead: null,
      assignDialogVisible: false,
      assignDialogTitle: '',
      assignForm: {
        owner: '',
        reason: ''
      },
      editDialogVisible: false,
      editForm: {},
      assignTargetLeads: []
    }
  },
  mounted() {
    this.loadLeadPoolList()
  },
  methods: {
    loadLeadPoolList() {
      // 模拟数据
      this.leadPoolList = [
        {
          id: 1,
          customerName: '测试客户1',
          phone: '13812345678',
          email: 'test1@example.com',
          source: 'import',
          level: 'A',
          createTime: '2023-10-20 09:00:00',
          daysInPool: 3,
          priority: 'high',
          remark: '重要潜在客户，有强烈购买意向'
        },
        {
          id: 2,
          customerName: '测试客户2',
          phone: '13823456789',
          email: 'test2@example.com',
          source: 'activity',
          level: 'B',
          createTime: '2023-10-21 14:30:00',
          daysInPool: 2,
          priority: 'medium',
          remark: '活动现场获取的线索'
        },
        {
          id: 3,
          customerName: '测试客户3',
          phone: '13834567890',
          email: 'test3@example.com',
          source: 'manual',
          level: 'C',
          createTime: '2023-10-19 11:15:00',
          daysInPool: 4,
          priority: 'medium',
          remark: '通过朋友介绍'
        },
        {
          id: 4,
          customerName: '测试客户4',
          phone: '13845678901',
          email: 'test4@example.com',
          source: 'other',
          level: 'D',
          createTime: '2023-10-18 16:45:00',
          daysInPool: 5,
          priority: 'low',
          remark: '网站咨询获取'
        },
        {
          id: 5,
          customerName: '测试客户5',
          phone: '13856789012',
          email: 'test5@example.com',
          source: 'import',
          level: 'A',
          createTime: '2023-10-20 10:30:00',
          daysInPool: 3,
          priority: 'high',
          remark: '大型企业客户，预算充足'
        },
        {
          id: 6,
          customerName: '测试客户6',
          phone: '13867890123',
          email: 'test6@example.com',
          source: 'activity',
          level: 'B',
          createTime: '2023-10-21 09:20:00',
          daysInPool: 2,
          priority: 'medium',
          remark: '对我们的产品表现出兴趣'
        },
        {
          id: 7,
          customerName: '测试客户7',
          phone: '13878901234',
          email: 'test7@example.com',
          source: 'manual',
          level: 'C',
          createTime: '2023-10-19 14:40:00',
          daysInPool: 4,
          priority: 'low',
          remark: '需要后续跟进了解更多信息'
        }
      ]
      this.pagination.total = this.leadPoolList.length
    },
    handleSearch() {
      // 这里实现搜索逻辑
      console.log('搜索参数:', this.searchForm, this.searchDateRange)
      // 模拟搜索
      this.loadLeadPoolList()
    },
    resetSearch() {
      this.searchForm = {
        keyword: '',
        source: '',
        level: ''
      }
      this.searchDateRange = null
      this.loadLeadPoolList()
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection
    },
    handleViewDetail(row) {
      this.currentLead = row
      this.detailDialogVisible = true
    },
    handleClaim(row) {
      this.$confirm('确定要领取该线索吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里实现领取逻辑
        console.log('领取线索:', row)
        const index = this.leadPoolList.findIndex(item => item.id === row.id)
        if (index > -1) {
          this.leadPoolList.splice(index, 1)
          this.pagination.total = this.leadPoolList.length
        }
        this.$message({ type: 'success', message: '领取成功' })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消领取' })
      })
    },
    handleClaimFromDetail() {
      this.detailDialogVisible = false
      if (this.currentLead) {
        this.handleClaim(this.currentLead)
      }
    },
    handleAssign(row) {
      this.assignDialogTitle = '分配线索'
      this.assignTargetLeads = [row]
      this.assignForm = {
        owner: '',
        reason: ''
      }
      this.assignDialogVisible = true
    },
    handleBatchAssign() {
      this.assignDialogTitle = '批量分配线索'
      this.assignTargetLeads = [...this.selectedRows]
      this.assignForm = {
        owner: '',
        reason: ''
      }
      this.assignDialogVisible = true
    },
    handleAssignFromDetail() {
      this.detailDialogVisible = false
      if (this.currentLead) {
        this.handleAssign(this.currentLead)
      }
    },
    handleAssignSubmit() {
      // 这里实现分配逻辑
      console.log('分配线索:', this.assignTargetLeads)
      console.log('分配给:', this.assignForm)
      
      // 从线索池中移除已分配的线索
      this.assignTargetLeads.forEach(lead => {
        const index = this.leadPoolList.findIndex(item => item.id === lead.id)
        if (index > -1) {
          this.leadPoolList.splice(index, 1)
        }
      })
      
      this.pagination.total = this.leadPoolList.length
      this.selectedRows = [] // 清空选择
      this.$message({ type: 'success', message: '分配成功' })
      this.assignDialogVisible = false
    },
    handleEditLead(row) {
      this.editForm = { ...row }
      this.editDialogVisible = true
    },
    handleEditSubmit() {
      // 这里实现编辑逻辑
      console.log('编辑线索:', this.editForm)
      const index = this.leadPoolList.findIndex(item => item.id === this.editForm.id)
      if (index > -1) {
        this.leadPoolList[index] = { ...this.editForm }
      }
      this.$message({ type: 'success', message: '编辑成功' })
      this.editDialogVisible = false
    },
    handleDeleteLead(row) {
      this.$confirm('确定要删除该线索吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        // 这里实现删除逻辑
        console.log('删除线索:', row)
        const index = this.leadPoolList.findIndex(item => item.id === row.id)
        if (index > -1) {
          this.leadPoolList.splice(index, 1)
          this.pagination.total = this.leadPoolList.length
        }
        this.$message({ type: 'success', message: '删除成功' })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    handleDetailDialogClose() {
      this.currentLead = null
    },
    handleAssignDialogClose() {
      this.assignTargetLeads = []
    },
    handleEditDialogClose() {
      this.editForm = {}
    },
    handleSizeChange(size) {
      this.pagination.pageSize = size
    },
    handleCurrentChange(current) {
      this.pagination.currentPage = current
    }
  }
}
</script>

<style scoped>
.lead-pool {
  padding: 20px;
}

.header-section {
  margin-bottom: 20px;
}

.header-section h2 {
  margin-bottom: 15px;
  color: #303133;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.search-input {
  width: 200px;
}

.search-select {
  width: 150px;
}

.date-picker {
  width: 240px;
}

.table-section {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.lead-detail {
  padding: 10px 0;
}
</style>